<template>
  <NEl class="p-4 top-box">
    <div class="fs-5">留言板</div>
    <!-- <div>{{ list }} {{ loading }}</div> -->
    <div>
      <NSpace>
        <NInput v-model:value="queryInfo.info" placeholder="标题搜索"></NInput>
        <NButton type="primary" @click="search">查询</NButton>
      </NSpace>
    </div>
    <HuUserInfo></HuUserInfo>
  </NEl>

  <div class="p-4 tc" v-if="page.pageNumber >= page.pageCount && !loading">我是有底线的</div>
  <NBackTop></NBackTop>

  <div class="pl-20 pr-20" style="width: 50vw; margin: 0px auto">
    <!-- 切换顺序 -->
    <NTabs @update:value="changeOrder">
      <NTabPane name="1" tab="最新"></NTabPane>
      <NTabPane name="2" tab="高赞"></NTabPane>
      <NTabPane name="3" tab="热门"></NTabPane>
      <NTabPane name="4" tab="热评"></NTabPane>
    </NTabs>
  </div>

  <!-- {{ loading }} -->
  <div class="pl-20 pr-20 fs-5" style="width: 55vw; margin: 0px auto">
    <div v-for="d in list" :key="d.mid" class="mb-3">
      <NCard :title="d.user.info.nickname">
        <div class="simg-box">
          <div class="messageinfo">
            <div class="fs-5" @click="toDetail(d.mid)">{{ d.title }}</div>
            <div class="detail mb-2 mt-2">
              <div>
                点击量：{{ d.hits }} 回复数：{{ d.reply }} 发帖时间:
                {{ Tools.formatDate(d.lastupdate, 'yyyy-MM-dd hh:mm:ss') }}
              </div>
              <div>
                <NPopover trigger="hover">
                  <span>点赞量:{{ d.praise }}</span>
                  <template #trigger>
                    <div :class="{ active: d.praise }">赞</div>
                  </template>
                </NPopover>
              </div>
            </div>
          </div>
        </div>
      </NCard>
    </div>
    <div class="p-4 tc" v-if="loading">
      <!-- <NButton @click="loadmore">加载更多...</NButton> -->
      <span> <NSpin size="small"></NSpin>正在加载中... </span>
    </div>
    <div class="p-4 tc" v-if="page.pageNumber >= page.pageCount && !loading">我是有底线的</div>
  </div>

  <NBackTop></NBackTop>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import HuUserInfo from '@/components/HuUserInfo.vue'
import type { TbMessage } from '@/types/message'
import type { BaseDataResult, PageBean, PageVo } from '@/types/BaseResult'
import { Api } from '@/types/Api'
import { Tools } from '@/types/Tools'
import { useRouter } from 'vue-router'
const router = useRouter()
import {
  useMessage,
  NCard,
  NPopover,
  NSpin,
  NInput,
  NButton,
  NSpace,
  NEl,
  NTabs,
  NTabPane,
  NBackTop,
} from 'naive-ui'

const message = useMessage()

const loading = ref(false)

// #region 查询的部分
const page = ref({ pageNumber: 1, pageSize: 10 } as PageBean)
const list = ref([] as TbMessage[])
const queryInfo = ref({ order: 1, info: '' })

const query = () => {
  loading.value = true
  Api.get(
    `/message/${page.value.pageSize}/${page.value.pageNumber}/${queryInfo.value.order}`,
    { info: queryInfo.value.info },
    (data: BaseDataResult<PageVo<TbMessage>>) => {
      loading.value = false
      if (data.success) {
        list.value = list.value.concat(data.data.list)
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

const search = () => {
  page.value.pageNumber = 1
  list.value = []
  query()
}

const requery = () => {
  page.value.pageNumber = 1
  queryInfo.value.info = ''
  list.value = []
  query()
}

const changeOrder = (order: number) => {
  queryInfo.value.order = order
  requery()
}

const loadmore = () => {
  page.value.pageNumber++
  if (page.value.pageNumber > page.value.pageCount) {
    return
  }
  query()
}

//#endregion

// #region 滚动相关
const scroll = () => {
  // console.log('滚动了')
  if (loading.value) {
    return
  }
  // console.log('是否到底部：', isScrollToBottom())
  if (isScrollToBottom()) {
    loadmore()
  }
}

const isScrollToBottom = () => {
  const scrollTop = document.documentElement.scrollTop || window.scrollY
  const sh = document.documentElement.scrollHeight
  const ch = document.documentElement.clientHeight
  return scrollTop + ch >= sh - 100
}
//#endregion

//#region 详情
const toDetail = (mid: number) => {
  router.push(`/message/${mid}`)
}
//#endregion

onMounted(() => {
  requery()
  window.addEventListener('scroll', scroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', scroll)
})
</script>
<style scoped>
.top-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: sticky;
  top: 0px;
  z-index: 10;
  background-color: var(--body-color);
}

.info {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.simg-box {
  display: flex;
  gap: 1rem;
  img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  > div:first-of-type {
    flex: 2;
  }
  > div:last-of-type {
    flex: 1;
  }
  .messageinfo {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
}

.detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .active {
    color: #ff0000;
  }
}
</style>
